<template>
  <div class="app-container">
    <!-- 页面标题和操作区 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>货物路线信息</span>
          <div>
            <el-button type="primary" :icon="Refresh" @click="handleRefresh" :loading="isOperating">刷新数据</el-button>
            <el-button :icon="Back" @click="$router.back()">返回</el-button>
          </div>
        </div>
      </template>
      
      <RouteHeader 
        :loading="isOperating"
        @refresh="handleRefresh"
        @go-back="$router.back()"
        style="display: none;"
      />
    </el-card>

    <!-- 主要内容区域 -->
    <div class="route-content">
      <!-- 左侧内容区 -->
      <el-card class="box-card info-panel">
        <template #header>
          <div class="card-header">
            <span>货物信息</span>
          </div>
        </template>
        <div v-loading="loading" class="info-scroll-container">
          <RouteInfo :shipment-info="shipmentInfo" />
        </div>
      </el-card>

      <!-- 右侧地图区域 -->
      <el-card class="box-card map-panel">
        <template #header>
          <div class="card-header">
            <span>追踪地图</span>
          </div>
        </template>
        <div class="map-container">
          <RouteMap
            ref="mapRef"
            :route-points="routePoints"
            :current-location="currentLocation"
            :shipment-info="shipmentInfo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Refresh, Back } from '@element-plus/icons-vue'
import RouteHeader from './components/RouteHeader.vue'
import RouteQuery from './components/RouteQuery.vue'
import RouteInfo from './components/RouteInfo.vue'
import RouteMap from './components/RouteMap.vue'
import { useRouteData } from './composables/useRouteData'

const route = useRoute()
const mapRef = ref(null)
const shipmentId = computed(() => route.params.id)

// 使用 Composable 获取数据和方法
const {
  loading,
  locationLoading,
  routePoints,
  shipmentInfo,
  currentLocation,
  isOperating,
  queryForm,
  initDefaultTime,
  fetchShipmentInfo,
  handleRefresh
} = useRouteData(shipmentId)

// 页面初始化 - 移除手动查询，改为自动加载
onMounted(async () => {
  // 获取货物信息
  await handleRefresh()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  
  @media (max-width: 1200px) {
    flex-direction: column;
  }
}

.info-panel {
  width: 400px;
  flex-shrink: 0;
  
  @media (max-width: 1200px) {
    width: 100%;
  }
}

.map-panel {
  flex: 1;
  min-width: 0;
}

.info-scroll-container {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: #c0c4cc;
  }
}

.map-container {
  height: calc(100vh - 280px);
  min-height: 400px;
  
  @media (max-width: 1200px) {
    height: 500px;
  }
}
</style>